<template>
  <view class="allocationRecordMain">
    <view class="allocationRecord">
      <view class="allocationRecordItemTop">
        <view class="cu-bar">
          <view class="action sub-title top">
            <text
              class="text-xl text-bold text-green"
              v-if="recordInfo.status == 1"
              >调拨成功</text
            >
            <text
              class="text-xl text-bold text-orange"
              v-if="recordInfo.status == 0"
              >调拨中</text
            >
            <text
              class="text-xl text-bold text-gray"
              v-if="recordInfo.status == 2"
              >调拨失败</text
            >
            <text class="bg-green" v-if="recordInfo.status == 1"></text>
            <text class="bg-orange" v-if="recordInfo.status == 0"></text>
            <text class="bg-grey" v-if="recordInfo.status == 2"></text>
          </view>
        </view>
      </view>
      <view class="allocationRecordItemSub">
        <u-cell-group :border="false">
          <u-cell-item
            icon="account"
            title="划拨人"
            :value="recordInfo.order_name"
            :arrow="false"
            :border-top="false"
            class="height"
            :valueStyle = "valueStyle"
          ></u-cell-item>
          <u-cell-item
            icon="man-add"
            title="接收人"
            :value="recordInfo.real_name"
            :arrow="false"
            class="height"
            :valueStyle = "valueStyle"
          >
          </u-cell-item>
          <u-cell-item
            icon="shopping-cart"
            title="机具名称"
            :value="recordInfo.name"
            :arrow="false"
            class="height"
            :valueStyle = "valueStyle"
          >
          </u-cell-item>
          <u-cell-item
            icon="clock"
            title="调拨时间"
            :value="formatTime(recordInfo.create_time)"
            :arrow="false"
            class="height"
            :valueStyle = "valueStyle"
          >
          </u-cell-item>
          <u-cell-item
            icon="list"
            title="机具数量"
            :value="recordInfo.nums"
            :arrow="false"
            :border-bottom="false"
            class="height"
            :valueStyle = "valueStyle"
          ></u-cell-item>
        </u-cell-group>
      </view>
    </view>

    <view class="machinesNumItem">
      <view class="cu-bar">
        <view class="action sub-title top">
          <text
            class="text-xl text-bold text-green"
            v-if="recordInfo.status == 1"
            >机具列表</text
          >
          <text
            class="text-xl text-bold text-orange"
            v-if="recordInfo.status == 0"
            >机具列表</text
          >
          <text
            class="text-xl text-bold text-gray"
            v-if="recordInfo.status == 2"
            >机具列表</text
          >
          <text class="bg-green" v-if="recordInfo.status == 1"></text>
          <text class="bg-orange" v-if="recordInfo.status == 0"></text>
          <text class="bg-grey" v-if="recordInfo.status == 2"></text>
        </view>
      </view>
      <view :class="[isAll ? 'machinesNumList' : 'machinesNumList isAll']">
        <view
          class="listView"
          v-for="(item, index) in recordInfo.snNoes"
          :key="index"
        >
          <view>{{ item }}</view>
        </view>
        <view
          class="viewMore flex align-center"
          v-if="!isAll && recordInfo.snNoes.length > 5"
          @tap="isAll = true"
        >
          查看全部
          <u-icon
            class="uIcon"
            name="arrow-down"
            color="#333"
            size="28"
          ></u-icon>
        </view>
      </view>
    </view>

    <view class="makeSure">
      <u-button
        type="error"
        :ripple="true"
        size="default"
        @click="orderHandleTab(2)"
        v-if="recordInfo.status == 0 && chooseStatus == '2'"
        >机具驳回
      </u-button>
      <u-button
        type="error"
        :ripple="true"
        size="default"
        @click="orderHandleTab(1)"
        v-if="recordInfo.status == 0 && chooseStatus == '2'"
        >确认领取
      </u-button>
    </view>
    <u-modal
      v-model="show"
      :content="content"
      show-cancel-button
      @confirm="confirm"
      confirm-color="#fb4535"
    ></u-modal>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chooseStatus: "",
      recordInfo: {},
      orderStatus: "",
      order_id: "",
      show: false,
      content: "",
      isAll: false,
      valueStyle:{
        color:"#333",
        fontWeight:"bold"
      }
    };
  },
  onLoad(options) {
    // 把JOSN字符串转为转为对象
    // let optionsData = JSON.parse(options.query);
    let optionsData = options;
    optionsData.snNoes = optionsData.snNoes.split(",");
    this.recordInfo = optionsData;
    this.chooseStatus = options.chooseStatus;
    this.order_id = optionsData.order_no;
  },
  mounted() {
    // this.getOrderList();
  },
  methods: {
    getOrderList() {
      this.$u.api
        .getOrderList({})
        .then((res) => {
          var datas = res.result;
          if (res.status == 200) {
            this.list = datas;
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },

    confirm() {
      let params = {
        orderNo: this.order_id,
        status: this.orderStatus,
      };
      this.$u.api.operateTransferOrder(params).then((res) => {
        if (res.status == 200) {
          this.$refs.uToast.show({
            title: res.msg,
            type: "success",
          });
          setTimeout(() => {
            this.$u.route({
              url: "/pages/jjhb/jjhbRecord",
              type: "redirect",
              params: {
                chooseStatus: this.chooseStatus,
              },
            });
          }, 1500);
        } else {
          this.$refs.uToast.show({
            title: res.msg,
            type: "error",
          });
          setTimeout(() => {
            this.$u.route({
              url: "/pages/jjhb/jjhbRecord",
              type: "redirect",
              params: {
                chooseStatus: this.chooseStatus,
              },
            });
          }, 2000);
        }
      });
    },

    // 订单处理
    orderHandleTab(orderStatus) {
      console.log(orderStatus);
      this.orderStatus = orderStatus;
      if (orderStatus == 1) {
        this.content = "确认领取订单？";
      } else if (orderStatus == 2) {
        this.content = "确认驳回订单？";
      }
      this.show = true;
    },

    //格式化时间
    formatTime(time) {
      return this.$tools.timeStamp(time);
    },
  },
};
</script>

<style lang="scss" scoped>
.allocationRecordMain {
  padding: 30upx;

  .allocationRecord {
    background: #fff;
    border-radius: 15upx;
    margin-bottom: 30upx;

    .allocationRecordItemTop {
      border-bottom: 2px dashed #f1f1f1;
      padding: 20rpx;
      position: relative;

      .cu-bar {
        min-height: 80rpx;
      }

      &::before {
        content: "";
        display: block;
        width: 30upx;
        height: 30upx;
        background: #f1f1f1;
        position: absolute;
        left: -15upx;
        bottom: -16upx;
        border-radius: 50%;
      }

      &::after {
        content: "";
        display: block;
        width: 30upx;
        height: 30upx;
        background: #f1f1f1;
        position: absolute;
        right: -15upx;
        bottom: -16upx;
        border-radius: 50%;
      }
    }

    .allocationRecordItemSub {
      padding: 20upx 0 10upx;

      .height {
        padding: 16rpx 32rpx;
      }

      view {
        line-height: 50upx;
        font-size: 32upx;
        color: #666;

        &.price {
          text-align: right;
          padding: 30upx 0 20upx;

          text {
            font-size: 48upx;
            color: #f33;
            font-weight: bold;
            position: relative;
            top: 4upx;
          }
        }
      }
    }
  }

  .machinesNumItem {
    padding: 10rpx 0;
    background-color: #fff;
    margin-top: 40rpx;
    border-radius: 20rpx;
    margin-bottom: 100rpx;

    .machinesNumList {
      border-radius: 20rpx;
      overflow: hidden;
      position: relative;
      height: auto;
      &.isAll {
        max-height: 700rpx;
      }
      view.listView {
        padding: 20rpx;
        border-bottom: 1rpx solid #f4f6f8;
        view {
          padding: 20rpx;
          font-size: 32rpx;
          font-family: numberFont;
          letter-spacing: 2rpx;
          color: #666;
        }
        &:last-of-type {
          border-bottom: none;
        }
      }
      view.viewMore {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.9);
        line-height: 80rpx;
        text-align: center;
        height: 80rpx;
        display: block;
        .uIcon {
          margin-left: 10rpx;
        }
      }
    }
  }

  .makeSure {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120rpx;
    line-height: 120rpx;
    display: flex;
    padding: 20rpx 30rpx;
    // background-color: #f1f1f1;

    & > button {
      width: 34%;
      background-color: #fb4535;
      border-radius: 20rpx;
    }

    & > button:last-child {
      background-color: #39b550;
    }
  }
}
</style>
